<style>
	.container-div {
		text-align: center;
		padding: 0px 28px;
		height: 400px;
	}
	.iblock {
		display: inline-block;
		height: 100%;
		width: 0;
		vertical-align: middle;
	}
	.box-child {
		padding: 10px;
	}
</style>
<% layout('/layouts/default.html', {title: '请假申请信息', libs: ['validate','dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main" style="padding-bottom: 20px;">
		<#form:form model="${testLeave}" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="tid"/>
				<input type="hidden" id="totalTimeHidden" value="${testLeave.totalTime}"/>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('申请人')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="user.userName" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('申请时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="applyTime" dataFormat="datetime" class="form-control digits" disabled="true"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('标题')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="title" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('请假时长')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<div class="input-group">
									<span class="input-group-btn">
										<input id="totalTimeText" class="form-control time-input" type="text" disabled="true">
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('开始时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="startTime" dataFormat="datetime" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('结束时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="endTime" dataFormat="datetime" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
				</div>
				<% if(testLeave.realityStartTime != null && testLeave.realityEndTime != null){ %>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('实际开始时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="realityStartTime" dataFormat="datetime" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('实际结束时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="realityEndTime" dataFormat="datetime" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
				</div>
				<% } %>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('原因')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">
								<#form:textarea path="reason" rows="4" maxlength="500" class="form-control" disabled="true"/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</#form:form>
		<div class="box-child collapsed-box">
			<div class="form-unit" data-widget="collapse-child" style="cursor: pointer;">${text('审批进度（点击查看流程图）')}
				<span class="box-tools btn-box-tool"><i class="fa fa-plus"></i></span>
			</div>
			<div class="box-body" style="display: none;">
				<div class="container-div">
					<img alt="流程暂未发起" src="">
					<i class="iblock"></i>
				</div>
			</div>
		</div>
		<div class="box-child">
			<div class="form-unit">${text('审批记录（查看详细历史记录）')}</div>
			<div class="box-body" style="padding: 0 30px;">
				<table id="dataGrid"></table>
			</div>
		</div>
	</div>
</div>
<% } %>
<script src="${ctxStatic}/activiti.6.0/js/activiti.js"></script>
<script>
	var instanceId = [[${testLeave.instanceId}]];
	$(function () {
		var totalTime = $("#totalTimeHidden").val();
		var dateSub = formatTotalDateSub(totalTime);
		$("#totalTimeText").val(dateSub);

		var url =  '${ctx}/flow/process/read-resource?pProcessInstanceId=' + instanceId;
		$('img').attr('src', url);
	});
	//# // 初始化DataGrid对象
	$('#dataGrid').dataGrid({
		url: "${ctx}/flow/process/listHistory?instanceId="+instanceId,
		columnModel: [
			{header:'${text("环节名称")}', name:'activityName', width:150, align:"center"},
			{header:'${text("创建时间")}', name:'startTime', width:150, align:"center"},
			{header:'${text("完成时间")}', name:'endTime', width:150, align:"center"},
			{header:'${text("任务历时")}', name:'durationInMillis', width:180, align:"center",formatter: function(value, row, index) {
				if (!value) return '未知';
				return formatTotalDateSub(value / 1000);
			}},
			{header:'${text("处理人")}', name:'assigneeName', width:120, align:"center"},
			{header:'${text("审批意见")}', name:'comment', width:330, align:"left"},
		],
		//# // 加载成功后执行事件
		ajaxSuccess: function(data){

		}
	});
</script>